
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <input v-on:keyup.enter="search" v-model.trim="keyword" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button v-on:click="search" class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
    </div>
</nav>

<div id="main" style="height:800px;"></div>

<script type="text/javascript">
    let categories = <?= $letters ?? ''?>;
    let data = <?= $nodes ?? ''?>;
    let link = <?= $links ?? ''?>;
    console.log(data)
    let option = {
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        animation: false,
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [{
            type: 'tree',
            data: data,

            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',

            symbolSize: 7,

            label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 12
            },

            leaves: {
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
        }]
    };
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>